<template>
  <div class="infinite-container">
    <div class="topBg flex flex_vcenter">
      <img v-lazy="doctor.header||''" alt />
      <div class="flex_full">
        <div>
          <span class="docName">{{doctor.doctorName}}</span>
        </div>
        <div class="mt10">
          <span>{{doctor.doctorTitle}}</span>
          <span>{{doctor.departmentName}}</span>
        </div>
      </div>
    </div>
    <ul class="feeAndCallback">
      <li class="flex flex_between">
        <label>复诊配药（诊疗费）</label>
        <span class="feeText">{{'￥' + (order.cost || 0)}}</span>
      </li>
      <!--<li class="flex flex_between">-->
      <!--<label>回复时间</label>-->
      <!--<span>预计3小时内回复，超过24小时自动退款</span>-->
      <!--</li>-->
    </ul>
    <div class="longBtnC">
      <mu-raised-button
        label="确认支付"
        fullWidth
        primary
        @click="confirmToPay()"
        :disabled="confirmBtnDisable"
      ></mu-raised-button>
    </div>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "../../api/api";

export default {
  data() {
    return {
      doctor: {},
      order: {},
      param: {
        consultId: 0,
        status: "10",
        tradeNo: ""
      },
      illPayType: "",
      pageData: "",
      confirmBtnDisable: false
    };
  },
  mounted() {
    this.doctor = this.$store.state.pageData;
    this.illPayType = sessionStorage.getItem("illPayType");
    if (!this.$route.query) {
      this.$store.commit("UPDATE_TOAST", { message: "页面缺少参数" });
    }
    this.order = this.$route.query;
    this.loadPageData();
  },
  methods: {
    loadPageData() {
      commonAjaxJson(
        RESTFUL_API.getConsultDetails,
        {
          id: this.order.consultId
        },
        true
      ).then(res => {
        if (res.data.code == 200) {
          this.pageData = res.data.data;
        } else {
          this.$store.commit("UPDATE_TOAST", {
            message: res.data.message
          });
        }
      });
    },
    confirmToPay() {
      this.$router.replace({
        path: "/medicalAgain/confirmPay",
        query: {
          cid: this.order.consultId
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../common/css/flex.css";
@import "../../common/css/component";

.borderBtn {
  font-size: 9px;
  padding: 2px 4px;
  color: #ff6600;
  border-color: #ff6600;
}

.feeText {
  color: #ff6600;
}

.goodAt {
  font-size: 12px;
  background: #ffac29;
}

.text-gray {
  color: #666;
}

.docName {
  color: #333;
}

.mt10 span {
  color: #666;
}

.flex.flex_between {
  label {
    color: #666;
  }
}

.feeAndCallback {
  > li:last-child {
    span {
      color: #333;
    }
  }
}

.topBg {
  background-color: white;
  padding: 10px 0;
  img {
    width: 80px;
    height: 80px;
    margin: 0 10px;
  }
}

.docName {
  font-size: 16px;
}

.feeAndCallback {
  li {
    background-color: white;
    margin-top: 10px;
    padding: 10px;
  }
  label {
    color: #7e7e7e;
  }
}
</style>
